/*------------- #FORMS --------------*/


label.control-label {
  color: $placeholder-form-color;
}

textarea {
  min-height: 132px;
}

.form-group.label-floating textarea {
  padding: 1.3rem 1.1rem .2rem;
}

input, .form-control {
  color: $form-color;
  line-height: inherit;
  font-size: .875rem;
}

.label-floating.has-success:after {
  content: '\f00c';
  font-family: FontAwesome;
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 100%;
  font-size: 9px;
  background-color: #08ddc1;
  color: $white-color;
  text-align: center;
  right: 20px;
  top: 50%;
  margin-top: -10px;
}

.has-success .form-control-success,
.has-danger .form-control-danger {
  background-image: none;
}

.form-group {
  &.with-icon-right {
    .form-control, input, textarea {
      padding-right: 60px;
    }
  }
}

.label-floating {
  .form-control, input, select {
    padding: 1.3rem 1.1rem .4rem;
    line-height: 1.8;
  }

  textarea.form-control {
    padding: 1.5rem 1.1rem .2rem;
  }

  &.with-icon {
    .form-control, input, textarea {
      padding-left: 70px;
    }

  }
}

.label-floating.has-danger:after {
  content: '\f00d';
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 100%;
  background-color: #f92552;
  color: $white-color;
  font-size: 9px;
  right: 20px;
  top: 50%;
  margin-top: -10px;
  font-family: FontAwesome;
}

select.form-control {
  padding-left: .875rem;
}

.form-group.with-icon {
  i {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50px;
    text-align: center;
    line-height: 3.5rem;
    border-right: 1px solid $border-color;
    font-size: 20px;
  }

  input {
    padding-left: 70px;
  }
}

.form-group.with-button {
  button {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 35px;
    text-align: center;
    line-height: 100%;
    color: $white-color;
    fill: $white-color;
    background-color: #d7d9e5;
    border: none;
  }

  input {
    padding-right: 50px;
    padding-left: 15px;
  }
}

.label-floating.with-icon label.control-label,
.label-placeholder.with-icon label.control-label {
  left: 70px;
}

.date-time-picker input {
  position: relative;
  z-index: 5;
}

.input-group-addon {
  position: absolute;
  right: 0;
  top: 0;
  background-color: transparent;
  border: none;
  height: 100%;

  svg {
    fill: $icon-color;
    width: 22px;
  }
}


.custom-control-description {
  padding-left: 7px;
  color: $body-font-color;
  line-height: 2;
}

.tooltip-inner {
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 500;
}

.tooltip-secondary .tooltip-inner {
  background-color: $secondary-color;
}

.tooltip-primary .tooltip-inner {
  background-color: $primary-color;
}

.tooltip-completed .tooltip-inner {
  background-color: $breez;
}

/*------------- Toggle Button --------------*/

.togglebutton {
  vertical-align: middle;
  margin-bottom: 20px;
}
.togglebutton, .togglebutton label, .togglebutton input, .togglebutton .toggle {
  user-select: none;
}
.togglebutton label {
  cursor: pointer;
  color: rgba(0,0,0, 0.26);
}
.form-group.is-focused .togglebutton label {
  color: rgba(0,0,0, 0.26);
}
.form-group.is-focused .togglebutton label:hover, .form-group.is-focused .togglebutton label:focus {
  color: rgba(0,0,0, .54);
}
fieldset[disabled] .form-group.is-focused .togglebutton label {
  color: rgba(0,0,0, 0.26);
}
.togglebutton label input[type=checkbox] {
  opacity: 0;
  width: 0;
  height: 0;
}
.togglebutton label .toggle {
  text-align: left;
  margin-left: 5px;
}
.togglebutton label .toggle,
.togglebutton label input[type=checkbox][disabled] + .toggle {
  content: "";
  display: inline-block;
  width: 66px;
  height: 30px;
  background-color: rgba(80, 80, 80, 0.7);
  border-radius: 15px;
  margin-right: 0;
  transition: background 0.3s ease;
  vertical-align: middle;
}
.togglebutton label .toggle:after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 26px;
  background-color: #FFFFFF;
  border-radius: 20px;
  position: relative;
  left: 3px;
  top: 3px;
  transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
  text-align: center;
}
.togglebutton label input[type=checkbox][disabled] + .toggle:after, .togglebutton label input[type=checkbox][disabled]:checked + .toggle:after {
  background-color: #BDBDBD;
}
.togglebutton label input[type=checkbox] + .toggle:active:after, .togglebutton label input[type=checkbox][disabled] + .toggle:active:after {
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
}
.togglebutton label input[type=checkbox]:checked + .toggle:after {
  left: 37px;
}
.togglebutton label input[type=checkbox]:checked + .toggle {
  background-color: $primary-color;
}
.togglebutton.blue label input[type=checkbox]:checked + .toggle {
  background-color: $blue;
}
.togglebutton label input[type=checkbox]:checked + .toggle:active:after {
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(156, 39, 176, 0.1);
}
.description-toggle {
  display: table;
  width: 100%;
  margin-bottom: 30px;

  & > * {
    display: table-cell;
    vertical-align: middle;
  }

  .togglebutton {
    text-align: right;
  }

  p {
    margin-bottom: 0;
  }
}

.add-field {
  display: table;
  color: $body-font-color;
  fill: $body-font-color;
  margin-bottom: 1rem;
  line-height: 100%;

  svg {
    margin-right: 10px;
    width: 12px;
    height: 12px;
  }

  & > * {
    display: table-cell;
    vertical-align: middle;
  }
}


.switcher-block {
  margin: 19px 0;
  display: table;
  width: 100%;

  .title {
    font-size: 13px;
  }

  & > * {
    margin-bottom: 0;
    display: table-cell;
    vertical-align: middle;

    &:last-child {
      text-align: right;
    }
  }

}


// STYLES for RADIO buttons and checkboxes

.radio {
  margin-bottom: 1rem;
}
.radio label {
  cursor: pointer;
  padding-left: 35px;
  position: relative;
}
.radio label span {
  display: block;
  position: absolute;
  left: 10px;
  top: -1px;
  transition-duration: 0.2s;
}
.radio label .circle {
  border: 1px solid $border-color;
  height: 18px;
  width: 18px;
  border-radius: 100%;
}
.radio label .check {
  height: 18px;
  width: 18px;
  border-radius: 100%;
  background-color: $primary-color;
  -webkit-transform: scale3d(0,0,0);
  -moz-transform: scale3d(0,0,0);
  -o-transform: scale3d(0,0,0);
  -ms-transform: scale3d(0,0,0);
  transform: scale3d(0,0,0);
}
.radio label .check:after {
  display: block;
  position: absolute;
  content: "";
  background-color: rgba(0,0,0, 0.87);
  left: -18px;
  top: -18px;
  height: 50px;
  width: 50px;
  border-radius: 100%;
  z-index: 1;
  opacity: 0;
  margin: 0;
  -webkit-transform: scale3d(1.5,1.5,1);
  -moz-transform: scale3d(1.5,1.5,1);
  -o-transform: scale3d(1.5,1.5,1);
  -ms-transform: scale3d(1.5,1.5,1);
  transform: scale3d(1.5,1.5,1);
}

.radio input[type=radio] {
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
  display: none;
}
.radio input[type=radio]:checked ~ .check, .radio input[type=radio]:checked ~ .circle {
  opacity: 1;
}
.radio input[type=radio]:checked ~ .check {
  background-color: $primary-color;
}
.radio input[type=radio]:checked ~ .circle {
  border-color: $primary-color;
}
.radio input[type=radio]:checked ~ .check {
  -webkit-transform: scale3d(0.45, 0.45, 1);
  -moz-transform: scale3d(0.45, 0.45, 1);
  -o-transform: scale3d(0.45, 0.45, 1);
  -ms-transform: scale3d(0.45, 0.45, 1);
  transform: scale3d(0.45, 0.45, 1);
}
.radio input[type=radio][disabled] ~ .check, .radio input[type=radio][disabled] ~ .circle {
  opacity: 0.26;
}
.radio input[type=radio][disabled] ~ .check {
  background-color: #000000;
}
.radio input[type=radio][disabled] ~ .circle {
  border-color: #000000;
}

@keyframes rippleOn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rippleOff {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}



.checkbox {
  margin-bottom: 1rem;
}
.checkbox label {
  cursor: pointer;
  padding-left: 0;
  margin-bottom: 0;
}
.form-group.is-focused .checkbox label {
  color: rgba(0,0,0, 0.26);
}
.form-group.is-focused .checkbox label:hover, .form-group.is-focused .checkbox label:focus {
  color: rgba(0,0,0, .54);
}
fieldset[disabled] .form-group.is-focused .checkbox label {
  color: rgba(0,0,0, 0.26);
}
.checkbox input[type=checkbox] {
  opacity: 0;
  position: absolute;
  margin: 0;
  z-index: -1;
  width: 0;
  height: 0;
  overflow: hidden;
  left: 0;
  pointer-events: none;
}
.checkbox .checkbox-material {
  vertical-align: middle;
  position: relative;
  top: 1px;
  padding-right: 5px;
  display: inline-block;
}
.checkbox .checkbox-material:before {
  display: block;
  position: absolute;
  left: 0;
  content: "";
  background-color: rgba(0, 0, 0, 0.84);
  height: 20px;
  width: 20px;
  border-radius: 100%;
  z-index: 1;
  opacity: 0;
  margin: 0;
  top: 0;
  -webkit-transform: scale3d(2.3,2.3,1);
  -moz-transform: scale3d(2.3,2.3,1);
  -o-transform: scale3d(2.3,2.3,1);
  -ms-transform: scale3d(2.3,2.3,1);
  transform: scale3d(2.3,2.3,1);
}
.checkbox .checkbox-material .check {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid $border-color;
  overflow: hidden;
  z-index: 1;
}
.checkbox .checkbox-material .check:before {
  position: absolute;
  content: "";
  transform: rotate(45deg);
  display: block;
  margin-top: -3px;
  margin-left: 7px;
  width: 0;
  height: 0;
  background: red;
  box-shadow: 0 0 0 0 inset;
  -webkit-animation: checkbox-off 0.3s forwards;
  -moz-animation: checkbox-off 0.3s forwards;
  -o-animation: checkbox-off 0.3s forwards;
  -ms-animation: checkbox-off 0.3s forwards;
  animation: checkbox-off 0.3s forwards;
}
.checkbox input[type=checkbox]:focus + .checkbox-material .check:after {
  opacity: 0.2;
}
.checkbox input[type=checkbox]:checked + .checkbox-material .check {
  background: $primary-color;
}
.checkbox input[type=checkbox]:checked + .checkbox-material .check:before {
  color: #FFFFFF;
  box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
  -webkit-animation: checkbox-on 0.3s forwards;
  -moz-animation: checkbox-on 0.3s forwards;
  -o-animation: checkbox-on 0.3s forwards;
  -ms-animation: checkbox-on 0.3s forwards;
  animation: checkbox-on 0.3s forwards;
}
.checkbox.clicked input[type=checkbox]:checked + .checkbox-material:before {
  -webkit-animation: rippleOn 500ms;
  -moz-animation: rippleOn 500ms;
  -o-animation: rippleOn 500ms;
  -ms-animation: rippleOn 500ms;
  animation: rippleOn 500ms;
}
.checkbox.clicked input[type=checkbox]:checked + .checkbox-material .check:after {
  -webkit-animation: rippleOn 500ms forwards;
  -moz-animation: rippleOn 500ms forwards;
  -o-animation: rippleOn 500ms forwards;
  -ms-animation: rippleOn 500ms forwards;
  animation: rippleOn 500ms forwards;
}
.checkbox.clicked input[type=checkbox]:not(:checked) + .checkbox-material:before {
  -webkit-animation: rippleOff 500ms;
  -moz-animation: rippleOff 500ms;
  -o-animation: rippleOff 500ms;
  -ms-animation: rippleOff 500ms;
  animation: rippleOff 500ms;
}
.checkbox.clicked input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
  -webkit-animation: rippleOff 500ms;
  -moz-animation: rippleOff 500ms;
  -o-animation: rippleOff 500ms;
  -ms-animation: rippleOff 500ms;
  animation: rippleOff 500ms;
}
fieldset[disabled] .checkbox, fieldset[disabled] .checkbox input[type=checkbox],
.checkbox input[type=checkbox][disabled] ~ .checkbox-material .check,
.checkbox input[type=checkbox][disabled] + .circle {
  opacity: 0.5;
}
.checkbox input[type=checkbox][disabled] ~ .checkbox-material .check {
  border-color: #000000;
  opacity: .26;
}
.checkbox input[type=checkbox][disabled] + .checkbox-material .check:after {
  background-color: rgba(0,0,0, 0.87);
  transform: rotate(-45deg);
}

@keyframes checkbox-on {
  0% {
    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
  }
  50% {
    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
  }
  100% {
    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
  }
}
@keyframes rippleOn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rippleOff {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}